<template>
  <div>
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="logo">
          <div>UNL-ADMIN</div>
        </div>
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['/homepage']"
          :style="{ lineHeight: '64px' }"
          @click="onClickroute"
        >
          <a-menu-item key="/homepage"> 首页</a-menu-item>
          <a-menu-item key="/commodity"> 商品 </a-menu-item>
          <a-menu-item key="/orderfrom"> 订单</a-menu-item>
          <a-menu-item key="/member"> 会员</a-menu-item>
          <a-menu-item key="/set"> 设置 </a-menu-item>

          <a-dropdown>
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              admin<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="onClickOut">退出登录</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">个人中心</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-menu>
      </a-layout-header>
      <router-view />
    </a-layout>
  </div>
</template>

<script>
export default {
  methods: {
    onClickroute(props) {
      this.$router.push(props.key);
    },
    onClickOut() {
      localStorage.removeItem("token");
      this.$router.push("/login");
      this.$message.info("退出成功");
    },
  },
};
</script>

<style>
.logo {
  font-size: 24px;
  font-weight: 600;
  color: white;
}
.ant-layout {
  height: 84vh;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #545c64;
}
.ant-menu-dark {
  background: #545c64;
}
</style>